<template>
	<view class="loginbackground">
		<view class="">
			<view class="text-center">
				<image class="img-title" src="../../static/img/loginTitle.png" mode=""></image>
			</view>
			<view class="text-center color-fff size-18 marginb-40">注册 / 登录</view>
			<view class="loginInput">
				<image class="img-left" src="../../static/img/ic_account_left.png" mode=""></image>
				<image @click="clearTel" v-if="this.loginInfo.telNo.length" class="img-right" src="../../static/img/ic_inputer_clear.png" mode=""></image>
				<input v-input-fb placeholder-class="color-fff"  @keydown.native="loginkeydown($event)" placeholder="请输入手机号码" :maxlength="13" class="uni-input size-14" type="text" v-model="loginInfo.telNo" />
			</view>
			<view class="flex-between margint-20">
				<view class="loginInput widthb-50 height-80">
					<image class="img-left" src="../../static/img/telno.png" mode=""></image>
					<input v-input-fb placeholder-class="color-fff" placeholder="请输入验证码" :maxlength="6" class="uni-input size-14" type="number" v-model="loginInfo.verificationCode" />
				</view>
				<button  :disabled="showData" @click="showVerify" class="height-80 size-14 padding-0 width-200 marginr-50" style="background-color: #1f9dd8;color: #fff!important;">
					<template v-if="sending">
						获取验证码
					</template>
					<template v-else>
						{{second}}s
					</template>
				</button>
			</view>
			<Verify
				@success='getcodeFun'
				:mode="'pop'"
				:captchaType="'clickWord'"
				:captchaId ="'btn'"
				ref="verify"
				:imgSize="{width:'310px',height:'155px'}"
			></Verify>
			<view class="base-color padding24-50">
				<view class="flex-start">
					<checkbox-group>
						<checkbox @click="isChecked = !isChecked" :checked="isChecked" />
					</checkbox-group>
					<view class="margind-20">
						<text class="base-size color-de">我已同意</text>
						<text @click="gotousePact" class="base-size color-fff">《用户注册协议》</text>
						<text @click="gotoprivacyPact" class="base-size color-fff">《隐私保护协议》</text>
					</view>
				</view>
				<button class="confirm" v-bind:class="{'valid-btn':isValid}" @click="confirm" type="primary">登 录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import unicore from '@/core/core.service.ts'
	import graceChecker from "@/common/graceChecker.js"
	import Verify from "@/components/verify/verify.vue"
	export default {
		data() {
			return {
				sending: true, // 显示获取验证码按钮
				isChecked: false,
				second: 60,
				showData: false,
				showCode: false ,// 显示验证码模块,
				loginshowPwd:false,
			}
		},
		components:{
			Verify
		},
		created(){
			history.pushState(null,null,document.URL)
            window.addEventListener("popstate",(e)=>{
				history.pushState(null,null,document.URL)
			})
        },
		methods: {
			showVerify(){
				const telNo = this.loginInfo.telNo.replace(/\ /g,"");
				if(this.$core.regexp.isMobile(telNo)){
					this.$refs.verify.show()
				} else {
					uni.showToast({
						title:"手机号格式不正确，请确认！",
						icon:"none"
					})
				}
				
			},
			confirm(){
				if (!this.isChecked) {
					uni.showToast({
						icon: "none",
						title: '请先阅读并勾选协议'
					})
					return ;
				}
				const telNo = this.loginInfo.telNo.replace(/\ /g,"");
				const wxOpenId = unicore.dom.getQueryString("wxOpenId") || unicore.util.localStorage.get("wxOpenId");
					unicore.util.localStorage.set("wxOpenId",wxOpenId)
				if (this.isValid) {
					let parms = { // 登录
						telNo: telNo,
						verificationCode:this.loginInfo.verificationCode,
						fromNo: this.iswxh5?'WXGZH':'H5',
						thirdId: this.iswxh5?wxOpenId:'',
						//redirect: this.$store.state.common.redirect
					}
					console.log(parms, 'parms')
					this.$store.dispatch('loginNoPassThirdEnc', parms).then(res => {
						if(res.reqResult.code == 1){
							this.$store.state.common.dlzh = telNo
							this.$store.state.common.realname = res.data.realname
							this.$store.state.common.token = res.data.token
							console.log(this.$store.state.common,'this.$store.state.common')
							let redirect = decodeURIComponent(unicore.dom.getQueryString("redirect"))
							console.log(redirect,'redirect')
							const flag = res.data.flag
							unicore.util.localStorage.set("dlzh",telNo)
							if (flag==1||flag==3) { // 1注册，2登录
								unicore.util.localStorage.set("noPassword",true)
							}
							uni.showModal({
								content:res.reqResult.msg,
								confirmText: "我知道了",
								showCancel:false,
								success: res => {
									if(res.confirm){
										this.$store.state.generalloan.menuFromno.isBind = "true"
										if (flag==1||flag==3) { // 1注册，2登录
											return uni.redirectTo({url:'passwordty?redirect='+redirect})
										}else if (flag==2) {
											if (this.iswxh5) {
												return uni.redirectTo({url:redirect})
											}
											let url = this.$store.state.common.saveUrl?this.$store.state.common.saveUrl:'/pages/menuPage/index'
											console.log(url,"url实名跳转url")
											return this.$store.state.common.realname?uni.redirectTo({url:url}):uni.redirectTo({url:'/pages/uploadId/uploadId'})
										}
									}
								}
							});
						}
					})
				} else {
					uni.showToast({
						icon: "none",
						title:graceChecker.error
					})
				}
			},
			getyzCode(){
				let result = setInterval(()=>{
					-- this.second;
					if (this.second < 0) {
						clearInterval(result)
						this.sending = true
						this.showData = false
						this.second = 60
					}
				},1000)
			},
			getcodeFun ({captchaVerification}) {
				const telNo = this.loginInfo.telNo.replace(/\ /g,"");
				if(this.$core.regexp.isMobile(telNo)){
					this.$store.dispatch('getRegH5CodePub',{
						telNo: telNo,
						flag: '1',
						realSend: true,
						captchaVerification,
						captchaType:'clickWord'
					}).then(res => {
						if (res.reqResult.code == 1) {
							this.loginInfo.verificationCode = res.data.temp?res.data.temp:''
							console.log(res,'res')
							uni.showToast({
								icon: "success",
								title: "验证码发送成功"
							})
						}
					})
					this.sending = false
					this.showData = true
					this.getyzCode()
				} else {
					uni.showToast({
						title:"手机号格式不正确，请确认！",
						icon:"none"
					})
				}
			},
			gotousePact(){
				uni.navigateTo({
					url:"/pages/login/userPact"
				})
			},
			gotoprivacyPact(){
				uni.navigateTo({
					url:"/pages/login/privacyPact"
				})
			},
			loginkeydown(e){
				e = e || window.event
				let keyCode = e.keyCode || e.which || e.charCode
				setTimeout(()=>{ // uni-app input有延迟
					let telNo = this.loginInfo.telNo
					telNo=telNo.replace(/[^0-9,\s]+/g,'')
					if(e.keyCode === 8) {
						return
					}else if(telNo.length === 3 || telNo.length === 8) {
						telNo += " "
					}
					this.loginInfo.telNo = telNo
				},0)
			},
			clearTel(){
				this.loginInfo.telNo = "";
			},
		},
		computed:{
			loginInfo() {
				return this.$store.state.generalloan.loginInfo;
			},
			isValid(){
				const telNo = this.loginInfo.telNo.replace(/\ /g,"")
				let rule = [
					{name: 'telNo', checkType: 'boolean',checkRule:this.$core.regexp.isMobile(telNo), errorMsg: '手机号码格式不正确'},
					{name: 'verificationCode', checkType: 'notnull',errorMsg: '验证码不能为空'}
				]
				let checkRes = graceChecker.check(this.loginInfo, rule)
				return checkRes;
			},
			iswxh5(){
				return unicore.env.iswxh5
			}
		}
	}
</script>
<style scoped lang="scss">
	.loginInput{margin: 0 50upx;background-color: #5555;border-radius: 10upx;}
	.background-5555{background-color: #5555!important;}
	.loginInput .uni-input{height: 80upx;line-height: 80upx;color: #fff;}
	.color-fff{
		color: #fff;
	}
	uni-checkbox{
		zoom: 0.7;
		position: relative;
		top: -2upx;
	}
	.color-de{
		color: #89cff0;
	}
	.valid-btn{
		background-color: #1f9dd8!important;
	}
	.confirm{
		background-color: #888888;
	}
	.img-title{
		width: 120upx;
		height: 120upx;
		margin: 200upx 0 20upx;
	}
	.img-left{
		float: left;
		width: 44upx;
		height: 44upx;
		margin-top: 18upx;
		margin-left: 8upx;
		margin-right: 8upx;
	}
	.img-right{
		float: right;
		width: 32upx;
		height: 32upx;
		margin-top: 24upx;
		margin-left: 10upx;
		margin-right: 16upx;
	}
</style>
